<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import OrgTree from '../org/OrgTree.vue'
import EmployeeDetailPanel from './EmployeeDetailPanel.vue'
import EmployeeResetPasswordPanel from './EmployeeResetPasswordPanel.vue'
import EmployeeAddModal from './EmployeeAddModal.vue'
import type { OrgApi } from '@/apis'
import { EmployeeApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useTable } from '@/hooks'
import { useUserStore } from '@/stores'
import getAvatar from '@/utils/avatar'

defineOptions({
  name: 'EmployeeIndex',
})

const emit = defineEmits<{
  (e: 'change'): void
}>()

const userStore = useUserStore()

const queryForm = reactive<EmployeeApi.EmployeeQuery>({
  status: 1,
  includeSingleOrg: true,
})

const {
  tableData: dataList,
  loading,
  pagination,
  search,
} = useTable(page => EmployeeApi.getPage({ ...queryForm, ...page }))

const columns: TableInstanceColumns[] = [
  {
    title: '姓名',
    slotName: 'name',
    width: 120,
    fixed: 'left',
  },
  { title: '手机号', dataIndex: 'mobilePhone', width: 130 },
  { title: '性别', slotName: 'gender', align: 'center', width: 100 },
  { title: '所属部门', dataIndex: 'orgName', ellipsis: true, tooltip: true },
  { title: '类型', slotName: 'type', align: 'center', width: 80 },
  { title: '状态', slotName: 'status', align: 'center', width: 80 },
  {
    title: '操作',
    slotName: 'action',
    align: 'center',
    width: 80,
    fixed: 'right',
    show: userStore.hasPermission(['system:user:write']),
  },
]

// 根据选中部门查询
const selectedOrg = ref()
const onOrgSelect = (orgId: string, org: OrgApi.OrgResp) => {
  queryForm.orgId = orgId
  selectedOrg.value = org
  search()
}

// 重置
const reset = () => {
  queryForm.keyword = undefined
  queryForm.status = undefined
  search()
}

// 新增
const EmployeeAddModalRef = ref<InstanceType<typeof EmployeeAddModal>>()
const onAdd = () => {
  EmployeeAddModalRef.value?.open()
}

// 详情
const EmployeeDetailPanelRef = ref<InstanceType<typeof EmployeeDetailPanel>>()
const onDetail = (item: EmployeeApi.EmployeeResp) => {
  EmployeeDetailPanelRef.value?.open(item.id)
}

const EmployeeResetPasswordPanelRef = ref<InstanceType<typeof EmployeeResetPasswordPanel>>()
// // 重置密码
const onResetPwd = (item: EmployeeApi.EmployeeResp) => {
  EmployeeResetPasswordPanelRef.value?.open(item.id)
}

// 禁用账户
const onChangeStatus = async (item: EmployeeApi.EmployeeResp) => {
  const status = item.status === 0 ? 1 : 0
  await EmployeeApi.changeStatus(item.id, status)
  Message.success('操作成功')
  search()
  emit('change')
  return true
}
</script>

<template>
  <ProPage title="员工管理" description="在这里你可以对组织员工进行统一管理" flex-table>
    <TreeTableLayout>
      <template #left>
        <OrgTree @select="onOrgSelect" />
      </template>
      <template #right>
        <ProTable
          :data="dataList"
          :columns="columns"
          :loading="loading"
          :pagination="pagination"
          :scroll="{ x: '100%', y: '100%', minWidth: 680 }"
          @refresh="search"
          @row-click="onDetail"
        >
          <template #title-panel>
            <a-typography-title :heading="6" style="margin-top: 0">
              {{ selectedOrg?.name }}
            </a-typography-title>
          </template>
          <template #toolbar-left>
            <a-input v-model="queryForm.keyword" placeholder="请输入关键词" allow-clear @change="search">
              <template #prefix>
                <icon-search />
              </template>
            </a-input>
            <DictSelect v-model="queryForm.status" style="width: 80px" code="CommonStatusEnum" />
            <a-checkbox v-model="queryForm.includeSingleOrg" :default-checked="true">
              仅展示部门的直属成员
            </a-checkbox>
          </template>
          <template #toolbar-right>
            <a-button v-permission="['system:org:manage']" type="primary" @click="onAdd">
              <template #icon>
                <icon-plus />
              </template>
              <span>添加成员</span>
            </a-button>
          </template>
          <template #name="{ record }">
            <CellAvatar :avatar="getAvatar(record.avatar, record.gender)" :name="record.name" is-link @click="onDetail(record)" />
          </template>
          <template #gender="{ record }">
            <CellGender :gender="record.gender" />
          </template>
          <template #roleNames="{ record }">
            <CellTags :data="record.roleNames" />
          </template>
          <template #status="{ record }">
            <CellStatus :status="record.status" />
          </template>
          <template #type="{ record }">
            <CellDict code="EmployeeTypeEnum" :value="record.type" />
          </template>
          <template #action="{ record }">
            <a-dropdown trigger="hover">
              <a-button v-permission="'system:org:manage'" type="text" @click.stop="">
                <span style="margin-right: 10px">操作</span>
                <icon-down />
              </a-button>
              <template #content>
                <a-doption v-permission="'system:org:manage'" @click="onChangeStatus(record)" @change="search">
                  {{ record.status === 1 ? '禁用账户' : '启用账户' }}
                </a-doption>
                <a-doption v-permission="'system:org:manage'" @click="onResetPwd(record)" @change="search">
                  重置密码
                </a-doption>
              </template>
            </a-dropdown>
          </template>
        </ProTable>
      </template>
    </TreeTableLayout>
    <EmployeeAddModal ref="EmployeeAddModalRef" @change="search" />
    <EmployeeDetailPanel ref="EmployeeDetailPanelRef" @change="search" />
    <EmployeeResetPasswordPanel ref="EmployeeResetPasswordPanelRef" @change="search" />
  </ProPage>
</template>

<style lang="less" scoped>

</style>
